// 创建一个路由器， 并暴露出去

// 第一步 引入createRouter
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
// 引入一个一个的要呈现的组件
import About from "../../../src/pages/About.vue"
import Home from "../../../src/pages/Home.vue"
import News from "../../../src/pages/News.vue"
import Detail from '../../../src/pages/Detail.vue'

// 第二步 ：创建路由器
/**
 * `history`模式
 * 优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。
 * 缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。
 *  刷新会有`404`错误
 *     nginx 配置	修改
 *     location / {
 *        try_files $uri $uri/ /index.html
 *     }
 *
 *  `hash`模式
 * 优点：兼容性更好，因为不需要服务器端处理路径。
 * 缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差
 */
const router = createRouter({
    history:createWebHistory(), //路由器的工作模式 （history模式）
    routes: [{ // 一个一个的路由规则
        name: 'zhuye', //路由命名
        path: '/home',
        component: Home
    },{
        name: 'guanyu', //路由命名
        path: '/about',
        component:About
    },{
        name: 'xinwen', //路由命名
        path: '/news',
        component:News,
        children: [
            {
                name:'detail',
                path:'detail',
                component: Detail
            }
        ]
    }]
})

// 暴露出去router
export default router
